<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel=stylesheet type=text/css href="../html/common.css" />
    <link rel=stylesheet type=text/css href="../html/setting.css" />
    <link href="../res/jquery-ui-icon/jquery-ui.css" rel="stylesheet">
  </head>
  <body>
    <div class="fliedarea">
      <fieldset>
          <p>
            <label>Auto Refresh(s)：</label>
            <input type="text" id="refreshInterval" placeholder=" unit is second" />
          </p>
          <p>
            <label>Remind Style：</label>
            <select id="remindStyle">
              <option value="0">flicker</option>
              <option value="1">not flicker</option>
            </select>
          </p>
      </fieldset>
    </div>
    <hr />
    <div>
      <h3>Project Lists</h3>
      <div>
        <table class="table">
          <thead>
            <tr>
                <th style="width: 30%">url</th>
                <th style="width: 10%">Project</th>
                <th style="width: 10%">User</th>
                <th style="width: 20%">token</th>
                <th style="width: 10%">order</th>
            </tr>
          </thead>
          <tbody id="project-lists">
          </tbody>
        </table>
        <div style="text-align: center;">
          <span id="add" class="add-save-button ui-accordion-header ui-icon ui-icon-plus" title="add project"></span>
          <span id="save" class="add-save-button ui-accordion-header ui-icon ui-icon-disk saved-button" title="save and apply"></span>
        </div>
      </div>
    </div>
    <hr />
    <div>
      <div style="text-align: center;">
        <span>Search projects</span>
        <input id="searchBox"/>
      </div>
      <div id="repolists">
        <table class="table">
          <thead>
            <tr>
                <th style="width: 50%;text-align: left;">url</th>
                <th style="width: 40%;text-align: left;">name</th>
                <th style="width: 10%;text-align: left;">pick</th>
            </tr>
          </thead>
          <tbody id="repo-lists">
            <tr>
              <td></td><td>Loading...</td><td></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
  <script src="../script/setting_renderer.js"></script>
</html>
